<template>
  <view class="deposit">
    <u-sticky>
      <view class="search_left" style="padding:10upx;background: #ffffff;">
        <u-search @search="search" placeholder="请输入存放地" v-model="keyword"></u-search>
      </view>
    </u-sticky>

    <!-- 单选 -->
    <u-cell-group v-if="list.length>0">
      <u-cell v-for="(item,index) in list" :key="index">
        <view slot="title" class="image_item">
          <text>{{item}}</text>
        </view>
        <view slot="value" class="u-slot-value" @click="changeAccountPayType(item)">
          <radio :class="selectedAccountId == item ? 'checked' : ''" :checked="selectedAccountId == item" :value="item" />
        </view>
      </u-cell>
    </u-cell-group>

    <view class="footer">
      <u-button size="large" text="取消" @click="cancel"></u-button>
      <u-button size="large" type="primary" text="确定" @click="save"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [],
      selectedAccountId: null, // 选中的会员卡ID
    }
  },
  methods: {
    // 取值
    changeAccountPayType(accountId) { // 点击其中的一张会员卡
      if (this.selectedAccountId == accountId) { // 如果已经选中，则取消选中
        this.selectedAccountId = ''
      } else { // 否则进行选中赋值
        this.selectedAccountId = accountId
      }
    },
    search() {
      if (this.keyword) {
        const params = {
          deposit: this.keyword,
        }
        this.$u.api.GetDeposit(params).then((res) => {
          this.list = res.data

        })
      }

    },

    // 取消
    cancel() {
      this.$emit('changeCancel')
    },
    save() {
      this.$emit('onDeposit', this.selectedAccountId)
    }
  }
}
</script>

<style lang="scss" scoped>
.deposit {
  .footer {
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>